<template>
    <div class='sub-sort' :key="Math.random()">
        <div class="sort">
            <a href="javascript:;" :class="{ active: reqParams.sortField === null }" @click="handleSort(null)">默认排序</a>
            <a href="javascript:;" :class="{ active: reqParams.sortField === 'publishTime' }"
                @click="handleSort('publishTime')">最新商品</a>
            <a href="javascript:;" :class="{ active: reqParams.sortField === 'orderNum' }"
                @click="handleSort('orderNum')">最高人气</a>
            <a href="javascript:;" :class="{ active: reqParams.sortField === 'evaluateNum' }"
                @click="handleSort('evaluateNum')">评论最多</a>
            <a href="javascript:;" @click="handleSort('price')">
                价格排序
                <i class="arrow up" :class="{ active: reqParams.sortMethod === 'asc' }" />
                <i class="arrow down" :class="{ active: reqParams.sortMethod === 'desc' }" />
            </a>
        </div>
        <div class="check">
            <Checkbox v-model="reqParams.inventory" @click="emit('change', reqParams)">仅显示有货商品</Checkbox>
            <Checkbox v-model="reqParams.onlyDiscount" @click="emit('change', reqParams)">仅显示特惠商品</Checkbox>
        </div>
    </div>
</template>
  <script setup>
import { reactive, watch } from 'vue'
import { useRoute } from 'vue-router';
const emit = defineEmits()
const route = useRoute()
let reqParams = reactive({
    inventory: false,
    onlyDiscount: false,
    sortField: null,
    sortMethod: null
})
const handleSort = (val) => {
    if (val == 'price') {
        reqParams.sortField = val
        if (!reqParams.sortMethod)
            reqParams.sortMethod = 'desc'
        else
            reqParams.sortMethod = reqParams.sortMethod === 'desc' ? 'asc' : 'desc'
    } else {
        if (reqParams.sortField === val) return
        reqParams.sortField = val
    }
    emit('change', reqParams)
}

watch(() => route.params.id, (newVal) => {
    if (newVal && `/category/sub/${route.params.id}` === route.path) {
        reqParams.inventory = false
        reqParams.onlyDiscount = false
        reqParams.sortField = null
        reqParams.sortMethod = null
    }
})
</script>
  <style scoped lang='scss'>
  .sub-sort {
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
  
      .sort {
          display: flex;
  
          a {
              height: 30px;
              line-height: 28px;
              border: 1px solid #e4e4e4;
              padding: 0 20px;
              margin-right: 20px;
              color: #999;
              border-radius: 2px;
              position: relative;
              transition: all .3s;
  
              &.active {
                  background: $mainColor;
                  border-color: $mainColor;
                  color: #fff;
              }
  
              .arrow {
                  position: absolute;
                  border: 5px solid transparent;
                  right: 8px;
  
                  &.up {
                      top: 3px;
                      border-bottom-color: #bbb;
  
                      &.active {
                          border-bottom-color: $mainColor;
                      }
                  }
  
                  &.down {
                      top: 15px;
                      border-top-color: #bbb;
  
                      &.active {
                          border-top-color: $mainColor;
                      }
                  }
              }
          }
      }
  
      .check {
          .checkbox {
              margin-left: 20px;
              color: #999;
          }
      }
  }
  </style>